{
	template:`
    <m-page @back="back" :title="title">
		<m-card>
			<div class="padding-sm">
				<div v-for="(item,key) in typeList" :key="key" class="padding-xs cu-capsule radius" style="margin:0;">
					<div @click="queryTypeList(item.oid)" class='cu-tag light' :class="['bg-'+item.color]">{{item.name}}{{params['type.oid@eq']==item.oid?'√':''}}</div>
				</div>
				<span v-if="param.edit=='true'&&typeList.length==0">暂无商品分类，请联系商家管理添加商品分类。</span>
			</div>
		</m-card>
        <m-title>{{title}}
			<template #action>
				<m-button v-if="param.edit=='true'" @click="openDetail({status:'Y',type:{},store:store})">新增店铺服务</m-button>
			</template>
        </m-title>
		<m-top></m-top>
		<m-list ref="list" :url="url" :params="params" :bottom="0" :search="search">
			<template #item="{item}">
				<m-card join @click="openDetail(item)">
					<div class="flex padding-sm align-center">
                        <div class="cu-tag radius" :class="'bg-'+item.type.color">{{item.type.name}}</div>
                        <div class="flex-sub padding-lr-sm">
                            <div>
                                <div v-if="item.store.oid" class="cu-tag radius sm" :class="'bg-'+item.store.color">{{item.store.name}}</div>
                                {{item.title}}
                            </div>
                            <div class="text-sm text-gray">
                                原价{{formatAmount(item.price)}}元
                                <span v-if="item.discount" class="padding-bottom-xs text-blue">优惠{{item.discount}}%</span>
                            </div>
                        </div>
                        <div class="text-right text-sm">
                            <span class="text-lg text-red">{{formatAmount(item.price-item.price*(item.discount||0)/100)}}</span>元
                            <div v-if="item.reward" class="text-sm">奖励{{formatAmount(item.reward)}}元</div>
                        </div>
					</div>
                    <div v-if="item.description" class="padding-sm solid-top text-sm">
                        {{item.description}}
                    </div>
				</m-card>
			</template>
		</m-list>
		<m-modal ref="detail" title="服务商品信息" @close="$refs.list.refresh()">
			<div v-if="showDetail">
				<m-card>
                    <div class="cu-form-group">
                        <div class="title text-red">服务类型</div>
                        <div v-if="edit" class="flex-sub" style="padding:2.5px;">
                            <div v-for="item in typeList" class="cu-tag radius" style="margin:2.5px;" :class="[showDetail.type.oid==item.oid?'':'light','bg-'+item.color]" @click="showDetail.type.oid=item.oid">
                                {{item.name}}<span v-if="showDetail.type.oid==item.oid" class="cuIcon-check"/>
                            </div>
                        </div>
                        <div v-else class="flex-sub">
                            <div class="cu-tag radius" :class="['bg-'+showDetail.type.color]">{{showDetail.type.name}}</div>
                        </div>
                    </div>
                    <div class="cu-form-group">
                        <div class="title text-red">标题</div>
                        <m-input :operable="edit" v-model="showDetail.title" placeholder="请输入标题"></m-input>
                        <div v-if="showDetail.store.oid" class="cu-tag radius" :class="'bg-'+showDetail.store.color">{{showDetail.store.name}}</div>
                    </div>
                    <div class="cu-form-group">
                        <div class="title text-red">单价</div>
                        <m-input-number :operable="edit" v-model="showDetail.price" placeholder="请输入单价"></m-input-number>
                    </div>
                    <div class="cu-form-group">
                        <div class="title">优惠比例</div>
                        <m-input-number :operable="edit" v-model="showDetail.discount" format="#,##0" placeholder="请输入优惠比例"></m-input-number>
                        <div>%</div>
                    </div>
                    <div class="cu-form-group">
                        <div class="title">描述</div>
                        <m-input :operable="edit" type="textarea" v-model="showDetail.description" placeholder="请输入描述"></m-input>
                    </div>
                    <div class="cu-form-group">
                        <div class="title">奖励</div>
                        <m-input-number :operable="edit" v-model="showDetail.reward" placeholder="请输入奖励"></m-input-number>
                        <div>计算工资时的额外奖励</div>
                    </div>
				</m-card>
                <div class="flex padding-lr-sm padding-bottom">
                    <div class="flex-sub flex flex-direction padding-lr-xs">
                        <m-button @click="closeDetail()" line>关闭</m-button>
                    </div>
                    <div v-if="edit" class="flex-sub flex flex-direction padding-lr-xs">
                        <m-button @click="save">保存</m-button>
                    </div>
                </div>
			</div>
		</m-modal>
    </m-page>
	`,
	props: ['param','parentVue'],
	data:function(){
		return {
		    edit:false,
		    store:{},
            title:'店铺服务商品',
            url:'action/base/serveGoods/getStoreList',
            params:{'type.oid@eq':''},
            search:[
                {title:'标题',name:'title@like',input:'text'}
            ],
            showDetail:null,
            typeList:[]
		};
	},
	mounted(){
        this.store=config.store;
	    this.loadTypeList();
	},
	methods:{
        openDetail:function(item){
            this.edit=this.param.edit=='true'&&item.store.oid==this.store.oid;
            this.showDetail=Object.assign({},item);
            this.$refs.detail.open();
        },
        closeDetail:function(){
            this.$refs.detail.close();
        },
        save:function(){
            this.requestData('action/base/serveGoods/save',
                {model:this.showDetail},
                (data)=>{
                    if(data.code==0){
                        this.remind().success(data.msg);
                        this.closeDetail();
                    }else{
                        this.remind().error(data.msg);
                    }
                }
            );
        },
        queryTypeList:function(typeOid){
            if(this.params['type.oid@eq']==typeOid){
                this.params['type.oid@eq']="";
            }else{
                this.params['type.oid@eq']=typeOid;
            }
            this.$refs.list.refresh(1);
        },
        loadTypeList:function(){
            this.requestData('action/base/serveType/getAll',
                {},
                (data)=>{
                    if(data.code==0){
                        this.typeList=data.list;
                    }else{
                        this.remind().error(data.msg);
                    }
                }
            );
        }
	}
}